<template>
    <svg class="svg-icon" :style="{'fill': color, 'font-size': size+'px'}" aria-hidden="true">
        <use :xlink:href="iconName"></use>
    </svg>
</template>

<script>

    export default {
        name: 'icon-svg',
        props: {
            iconClass: {
                type: String,
                required: true
            },
            type: {
                type: String,
                default: 'small'
            },
            size: {
                type: String
            },
            color: {
                type: String
            }
        },
        computed: {
            iconName() {
                return `#el-icon-${this.iconClass}`
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .svg-icon{
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        overflow: hidden;
    }
    .small{
        font-size: 12px;
    }
    .normal{
        font-size: 14px;
    }
    .large{
        font-size: 18px;
    }
</style>